{% extends 'base.html' %}

{% block title %}我的借阅记录 - 图书馆管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>
                <i class="fas fa-list me-2"></i>我的借阅记录
            </h2>
            <a href="{% url 'books:book_list' %}" class="btn btn-outline-primary">
                <i class="fas fa-book me-1"></i>浏览书籍
            </a>
        </div>

        {% if borrow_records %}
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>书籍信息</th>
                                <th>借阅日期</th>
                                <th>应还日期</th>
                                <th>实际归还日期</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in borrow_records %}
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ record.book.title }}</strong>
                                        <br>
                                        <small class="text-muted">
                                            <i class="fas fa-user me-1"></i>{{ record.book.author }} | 
                                            <i class="fas fa-barcode me-1"></i>{{ record.book.isbn }}
                                        </small>
                                    </div>
                                </td>
                                <td>{{ record.borrow_date|date:"Y-m-d H:i" }}</td>
                                <td>
                                    {% if record.is_overdue %}
                                    <span class="text-danger fw-bold">{{ record.due_date|date:"Y-m-d H:i" }}</span>
                                    {% else %}
                                    {{ record.due_date|date:"Y-m-d H:i" }}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if record.return_date %}
                                    {{ record.return_date|date:"Y-m-d H:i" }}
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if record.status == 'borrowed' %}
                                        {% if record.is_overdue %}
                                        <span class="badge bg-danger">
                                            <i class="fas fa-exclamation-triangle me-1"></i>逾期
                                        </span>
                                        {% else %}
                                        <span class="badge bg-warning">
                                            <i class="fas fa-clock me-1"></i>借阅中
                                        </span>
                                        {% endif %}
                                    {% elif record.status == 'returned' %}
                                    <span class="badge bg-success">
                                        <i class="fas fa-check me-1"></i>已归还
                                    </span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ record.get_status_display }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if record.status == 'borrowed' %}
                                    <a href="{% url 'books:return_book' record.id %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-undo me-1"></i>归还
                                    </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-book fa-2x mb-2"></i>
                        <h4>{{ borrow_records.count }}</h4>
                        <p class="mb-0">总借阅数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-clock fa-2x mb-2"></i>
                        <h4>{{ borrow_records|length }}</h4>
                        <p class="mb-0">当前借阅</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-check fa-2x mb-2"></i>
                        <h4>{{ borrow_records|length }}</h4>
                        <p class="mb-0">已归还</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-danger text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                        <h4>{{ borrow_records|length }}</h4>
                        <p class="mb-0">逾期未还</p>
                    </div>
                </div>
            </div>
        </div>

        {% else %}
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">暂无借阅记录</h4>
                <p class="text-muted">您还没有借阅过任何书籍</p>
                <a href="{% url 'books:book_list' %}" class="btn btn-primary">
                    <i class="fas fa-book me-1"></i>开始借阅
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %} 